<script lang='ts'>
import { defineComponent, computed, onMounted, ref } from 'vue'
export default defineComponent({
    name: "JxtechSvgIcon"
})
</script>
<script lang="ts" setup>
const props = defineProps({
    icon: {
        type: String,
        default: "#icon-modular"
    },
    size: {
        type: Number,
        // default: "1.2em"
    },
    color: {
        type: String,
    }
})
const iconName = computed(() => {
    if (props.icon) {
        return props.icon.substring(0, 1) === '#' ? props.icon : '#' + props.icon
    } else { return "#icon-modular" }
}
)
const svgRef = ref()
onMounted(() => {
    svgRef.value.style.fontSize = props.size + "px" || '1.2em'
    svgRef.value.style.color = props.color
})


</script>
<template>
    <svg class="icon" aria-hidden="true" ref="svgRef">
        <use v-bind:xlink:href="iconName" />
    </svg>
</template>
<!-- <style lang="scss">
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style> -->